<template>
	<view class="customer-gather">
		<gyd-navbar back-color="#fff" :title="title"></gyd-navbar>

		<u-form class="form" labelPosition="left" :model="formData" :rules="rules" ref="formRef">
			<u-form-item class="form-item" label="客户类型" labelWidth="100" prop="customer_type">
				<u-radio-group v-model="formData.customer_type" @change="changeCustomerType">
					<u-radio v-for="(item, index) in customerTypeList" :key="index" :label="item.label"
						:name="item.value">
					</u-radio>
				</u-radio-group>
			</u-form-item>
			<u-form-item class="form-item" label="客户名称" labelWidth="100" prop="customer_name">
				<u-input v-model="formData.customer_name" placeholder="请输入客户名称"></u-input>
			</u-form-item>

			<view v-if="formData.customer_type==2 || formData.customer_type==3">
				<u-form-item class="form-item" label="企业名称" labelWidth="100" prop="business_license">
					<u-input v-model="formData.business_license" placeholder="请输入企业名称"></u-input>
				</u-form-item>
				<u-form-item class="form-item" label="信用代码" labelWidth="100" prop="credit_code">
					<u-input v-model="formData.credit_code" placeholder="请输入统一社会信用代码"></u-input>
				</u-form-item>
			</view>
			<u-form-item class="form-item" label="客户标签" labelWidth="100" prop="tags">
				<u-input v-model="formData.tags" placeholder="请输入(多个标签使用英文逗号','分隔)"></u-input>
			</u-form-item>
			<u-form-item class="form-item" label="服务类型" labelWidth="100" prop="service_type">
				<u-radio-group v-model="formData.service_type" @change="changeServiceType">
					<u-radio v-for="(item, index) in serviceTypeList" :key="index" :label="item.label"
						:name="item.value">
					</u-radio>
				</u-radio-group>
			</u-form-item>
			<u-form-item class="form-item" label="架子规格" labelWidth="100" prop="rack_type"
				v-if="formData.service_type==1">
				<u-radio-group v-model="formData.rack_type" @change="changeRackType">
					<u-radio v-for="(item, index) in rackTypeList" :key="index" :label="item.label" :name="item.value">
					</u-radio>
				</u-radio-group>
			</u-form-item>
			<u-form-item class="form-item" label="定期送" labelWidth="100" prop="regular_type"
				v-if="formData.service_type==2">
				<u-radio-group v-model="formData.regular_type" @change="changeRegularType">
					<u-radio v-for="(item, index) in regularTypeList" :key="index" :label="item.label"
						:name="item.value">
					</u-radio>
				</u-radio-group>
			</u-form-item>
			<u-form-item class="form-item" label="定期服务" labelWidth="100" prop="rack_type"
				v-if="formData.service_type==3">
				<u-radio-group v-model="formData.regular_type" @change="changeRegularType">
					<u-radio v-for="(item, index) in regularTypeList" :key="index" :label="item.label"
						:name="item.value">
					</u-radio>
				</u-radio-group>
			</u-form-item>

			<u-form-item class="form-item" label="定期送时间" labelWidth="100" prop="service_date"
				v-if="formData.service_type==2">
				<view v-if="formData.regular_type==1">
					<u-radio-group v-model="formData.service_date" @change="changeServiceDate">
						<u-radio v-for="(item, index) in weeks" :key="index" :label="item.label" :name="item.value">
						</u-radio>
					</u-radio-group>
				</view>
				<view v-else>
					<u-input v-model="formData.service_date" placeholder="请输入"></u-input>
				</view>
			</u-form-item>
			<u-form-item class="form-item" label="服务时间" labelWidth="100" prop="service_date"
				v-if="formData.service_type==3">
				<view v-if="formData.regular_type==1">
					<u-radio-group v-model="formData.service_date" @change="changeServiceDate">
						<u-radio v-for="(item, index) in weeks" :key="index" :label="item.label" :name="item.value">
						</u-radio>
					</u-radio-group>
				</view>
				<view v-else>
					<u-input v-model="formData.service_date" placeholder="请输入"></u-input>
				</view>
			</u-form-item>

			<u-form-item class="form-item" label="联系人姓名" labelWidth="100" prop="fullname">
				<u-input v-model="formData.fullname" placeholder="请输入"></u-input>
			</u-form-item>
			<u-form-item class="form-item" label="联系电话" labelWidth="100" prop="mobile">
				<u-input v-model="formData.mobile" placeholder="请输入"></u-input>
			</u-form-item>
			<u-form-item class="form-item" label="使用人数" labelWidth="100" prop="water_users">
				<u-input v-model="formData.water_users" placeholder="请输入"></u-input>
			</u-form-item>
			<u-form-item class="form-item" label="选择地区" labelWidth="100" prop="area_str">
				<u-input v-model="formData.area_str" placeholder="请输入"></u-input>
			</u-form-item>
			<u-form-item class="form-item" label="详细地址" labelWidth="100" prop="address">
				<u-input v-model="formData.address" placeholder="请输入"></u-input>
			</u-form-item>
			<!-- <u-form-item class="form-item" label="送水师傅" labelWidth="100" prop="master_id" v-if="formData.spread_type==3"> -->
			<u-form-item class="form-item" label="送水师傅" labelWidth="100" prop="master_id">
				<u-input v-model="formData.master_id" placeholder="请输入"></u-input>
			</u-form-item>
			<u-form-item class="form-item" label="有无电梯" labelWidth="100" prop="has_elevator">
				<u-radio-group v-model="formData.has_elevator" @change="changeElevatorType">
					<u-radio v-for="(item, index) in elevatorTypeList" :key="index" :label="item.label"
						:name="item.value">
					</u-radio>
				</u-radio-group>
			</u-form-item>
			<u-form-item class="form-item" label="楼层" labelWidth="100" prop="floor" v-if="formData.has_elevator==0">
				<u-input v-model="formData.floor" placeholder="请输入"></u-input>
			</u-form-item>
			<!-- <u-form-item class="form-item" label="是否月结" labelWidth="100" prop="month_settle" v-if="formData.spread_type==2"> -->
			<u-form-item class="form-item" label="是否月结" labelWidth="100" prop="month_settle">
				<u-radio-group v-model="formData.month_settle" @change="changeMonthSettle">
					<u-radio v-for="(item, index) in monthSettleStatus" :key="index" :label="item.label"
						:name="item.value">
					</u-radio>
				</u-radio-group>
			</u-form-item>
			<view v-if="formData.month_settle==1">
				<u-form-item class="form-item" label="可分配额度" labelWidth="100" prop="name">
					<u-input v-model="totalAmount" disabled></u-input>
				</u-form-item>
				<u-form-item class="form-item" label="月结额度" labelWidth="100" prop="settle_limit">
					<u-input v-model="formData.settle_limit" placeholder="请输入"></u-input>
				</u-form-item>
				<u-form-item class="form-item" label="月结算日" labelWidth="100" prop="settle_date">
					<u-input v-model="formData.settle_date" placeholder="请输入"></u-input>
				</u-form-item>
			</view>
		</u-form>

		<view class="footer">
			<view class="btn-group">
				<u-button type="primary" size="large" block @click="submit">提交</u-button>
			</view>
		</view>
	</view>
</template>

<script setup>
	import request from '@/utils/request';
	import cache from '@/utils/cache';
	import util from '@/utils/util';
	import {
		ref,
		reactive,
		toRefs,
		inject,
	} from 'vue';
	import {
		onLoad,
		onShow,
		onReady,
		onPullDownRefresh,
		onReachBottom,
	} from '@dcloudio/uni-app';

	const state = reactive({
		title: '新增客户',
		themeColor: cache.get('themeColor'),
		imgHost: util.requestUrl(),
		spread_type: 0, //推广类型，0无推广，1师傅，2代理，3商家，4员工
		customer_id: 0,
		formData: {
			id: 0,
			customer_type: 1,
			customer_name: '',
			business_license: undefined,
			credit_code: undefined,
			service_type: 1,
			rack_type: 3,
			fullname: '',
			mobile: '',
			tags: '',
			contacts_id: 0,
			need_invoice: 0,
			is_ad_put: 0,
			water_users: 1,
			has_elevator: 0,
			floor: 1,
			month_settle: 0,
			settle_limit: 0,
			settle_date: 25,
			province: 0,
			city: 0,
			area: 0,
			town: 0,
			area_str: '',
			address: '',
			regular_type: 1,
			service_date: 20,
			spread_type: 1,
			master_id: 0,
			region_id: 0,
		},
		customerTypeList: [],
		serviceTypeList: [],
		rackTypeList: [],
		regularTypeList: [],
		weeks: [],
		elevatorTypeList: [],
		monthSettleStatus: [],
		totalAmount: 0,
	});

	const rules = ref();
	const formRef = ref();

	//在页面所有元素加载完成后执行（只执行一次）
	onLoad((opt) => {
		console.log('onLoad');
		if (opt.hasOwnProperty('spread_type')) {
			console.log('传递参数', opt.spread_type);
			state.spread_type = opt.spread_type;
		}
		if (opt.hasOwnProperty('customer_id')) {
			state.customer_id = opt.customer_id;
			state.title = '编辑客户信息'
			getDetail();
		}
		getSelectData();
		// getRegion();
		if (state.spread_type == 3) {
			//商户才能更换送水师傅
			getMasterList();
		}
	});

	//在页面由不可见变为可见时执行（只要页面显示都会执行）
	onShow(() => {
		console.log('onShow');
	})

	//在页面解析完成之后执行
	onReady(() => {
		console.log('onReady');
	})

	onPullDownRefresh(() => {
		console.log('下拉刷新');
		setTimeout(() => {
			uni.stopPullDownRefresh();
		}, 1000);
	})

	onReachBottom(() => {
		console.log('触底加载更多');
	})

	function getSelectData() {
		request.get('filters.customer/getSelectData', {}).then(res => {
			console.log('选择数据', res);
			state.customerTypeList = res.data.customerTypeList;
			state.serviceTypeList = res.data.serviceTypeList;
			state.rackTypeList = res.data.rackTypeList;
			state.regularTypeList = res.data.regularTypeList;
			state.weeks = res.data.weeks;
			state.elevatorTypeList = res.data.elevatorTypeList;
			state.monthSettleStatus = res.data.monthSettleStatus;
		})
	}

	function getRegion() {
		request.get('merchant.storeregion/getListByStore', {
			storeId: state.formData.store_id
		}).then(res => {
			state.regionList = res.data
		})
	}

	function getMasterList() {
		request.get('master.master/list', {
			store_id: state.formData.store_id,
		}).then(res => {
			console.log('送水师傅', res);
			/* let data = res.data.data;
			data.forEach((item, index) => {
				state.masterList.push({
					value: item.id,
					text: item.nickname + '(' + item.mobile + ')',
				})
			}) */
		})
	}

	function submit() {
		let check = checkData();
		console.log('数据验证结果', check);
	}

	function checkData() {

	}

	function getDetail() {
		console.log('客户信息');
	}

	function changeCustomerType(e) {
		console.log('选择客户类型', e);
	}

	function changeServiceType(e) {
		console.log('选择服务类型', e);
	}

	function changeRackType(e) {
		console.log('选择架子规格', e);
	}

	function changeRegularType(e) {
		console.log('选择常规类型', e);
	}

	function changeServiceDate(e) {
		console.log('选择星期', e);
	}

	function changeElevatorType(e) {
		console.log('选择电梯', e);
	}

	function changeMonthSettle(e) {
		console.log('选择月结', e);
	}

	function pageRoute(url) {
		uni.navigateTo({
			url
		});
	}

	function pageTabRoute(url) {
		uni.reLaunch({
			url
		});
	}

	const {
		title,
		themeColor,
		imgHost,
		spread_type,
		customer_id,
		formData,
		customerTypeList,
		serviceTypeList,
		rackTypeList,
		regularTypeList,
		weeks,
		elevatorTypeList,
		monthSettleStatus,
		totalAmount,
	} = toRefs(state);
</script>

<style lang="scss">
	.customer-gather {
		padding-bottom: calc(100rpx + env(safe-area-inset-bottom));

		.form {
			padding: $m24 0;

			.form-item {
				margin: 0 $m16 $m16;
				padding: 0 $m24;
				background: #fff;
				border-radius: 10rpx;
			}
		}

		.footer {
			position: fixed;
			/* 固定在底部 */
			bottom: 0;
			width: 100%;

			.btn-group {}
		}
	}
</style>